<template>
  <div class="sider" width="273">
    <setting-item title="整体风格设置">
      <img-checkbox-group @change="setTheme">
        <img-checkbox img="static/img/setting/themeDark.svg" :checked="themeVal == 'dark'" value="dark" />
        <img-checkbox img="static/img/setting/themeLight.svg" :checked="themeVal == 'light'" value="light" />
      </img-checkbox-group>
    </setting-item>
    <a-divider />
    <setting-item title="导航设置">
      <img-checkbox-group @change="setLayout">
        <img-checkbox img="static/img/setting/layoutSide.svg" :checked="layoutVal == 'side'" value="side" />
        <img-checkbox img="static/img/setting/layoutHead.svg" :checked="layoutVal == 'head'" value="head" />
      </img-checkbox-group>
    </setting-item>
    <a-divider />
    <setting-item title="其他设置">
      <a-list :split="false">
        <a-list-item>
          多页签模式
          <a-switch :checked="multipage" slot="actions" size="small" @change="setMultipage" />
        </a-list-item>
      </a-list>
    </setting-item>
    <a-divider />
  </div>
</template>

<script>
import SettingItem from './SettingItem';
import StyleItem from './StyleItem';
import ColorCheckbox from '../checkbox/ColorCheckbox';
import ImgCheckbox from '../checkbox/ImgCheckbox';
import Clipboard from 'clipboard';

const ColorCheckboxGroup = ColorCheckbox.Group;
const ImgCheckboxGroup = ImgCheckbox.Group;

export default {
  name: 'Setting',
  components: { ImgCheckboxGroup, ImgCheckbox, ColorCheckboxGroup, ColorCheckbox, StyleItem, SettingItem },

  data() {
    return {
      themeVal: this.$store.state.setting.theme,
      layoutVal: this.$store.state.setting.layout
    };
  },

  computed: {
    multipage() {
      return this.$store.state.setting.multipage;
    }
  },
  methods: {
    onColorChange(values, colors) {
      if (colors.length > 0) {
        this.$message.info(`您选择了主题色 ${colors}`);
      }
    },
    setTheme(values) {
      this.$store.commit('setting/setTheme', values[0]);
    },
    setLayout(values) {
      this.$store.commit('setting/setLayout', values[0]);
    },
    copyCode() {
      let clipboard = new Clipboard('#copyBtn');
      const _this = this;
      clipboard.on('success', function() {
        _this.$message.success(`复制成功`);
        clipboard.destroy();
      });
    },
    setMultipage(checked) {
      this.$store.commit('setting/setMultipage', checked);
    }
  }
};
</script>

<style lang="less" scoped>
.sider {
  background-color: #fff;
  height: 100%;
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;
  // .flex {
  //   display: flex;
  // }
}
</style>
